<template>
	<view class="self-box">
		<view class="tabs">
			<view
				:class="{ 'tab-item-active': curTab == index }"
				class="tab-item"
				v-for="(item, index) in tabList"
				:key="index"
				@click="selectTab(item, index)"
			>
				{{ item.label }}</view
			>
		</view>
		<view class="tb">
			<view class="tb-top">
				<view class="tb-top-item" v-for="(item, index) in thList" :key="index">
					{{ item.label }}
				</view>
			</view>
			<u-collapse :arrow="false" v-if="list.length > 0">
				<u-collapse-item
					:class="`col-list-color${item.Level}`"
					v-for="(item, index) in list"
					:key="index"
					:disabled="false"
				>
					<template slot="title">
						<view class="col-list">
							<view>{{ item.Text }}</view>
							<view>{{ item.ContryConut }}</view>
							<view>{{ item.TwonCount }}</view>
							<view>{{ item.VillageCount }}</view>
						</view>
					</template>
					{{ item.body }}
				</u-collapse-item>
			</u-collapse>
			<view class="empty-box" v-if="list.length == 0">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>
<script>
	import warnApi from '@/api/monitor/warn.js'
	import uCollapse from '../../../uview-ui/components/u-collapse/u-collapse.vue'
	import moment from 'moment'
	export default {
		components: { uCollapse },
		name: 'sh',
		data() {
			return {
				curTab: 0,
				tabList: [
					{
						label: '实时预警',
						key: 0
					},
					{
						label: '2h预报预警',
						key: 1
					},
					{
						label: '24h气象预警',
						key: 2
					}
				],
				thList: [
					{
						label: '风险级别',
						key: 0
					},
					{
						label: '县个数',
						key: 1
					},
					{
						label: '乡镇个数',
						key: 2
					},
					{
						label: '村庄个数',
						key: 3
					}
				],
				list: [],
				timeParams: {
					begin: '',
					end: ''
				}
			}
		},
		methods: {
			// 实时预警
			async getData(link) {
				uni.showLoading({
					title: '加载中'
				})
				const params = {
					link: link
				}
				let res = await warnApi.getSift(params)
				this.list = res.data.Data || []
				this.$emit('getSh', this.list)
				this.$emit('getLegend', this.curTab)
				this.$hideLoading()
			},
			selectTab(val, idx) {
				this.curTab = idx
				this.fnComputeTime()
			},
			fnComputeTime(val) {
				let link = ''
				if (this.curTab == 0) {
					let dtEnd = moment().format('YYYY-MM-DD HH:mm:00')
					let dtBegin = moment(dtEnd).add(-1, 'days').format('YYYY-MM-DD HH:mm:00')
					link = `http://192.168.113.51:1302/sanhong/api/EarlyWarning/Api/GetVillageWarnStaticInfo?addvcd=350400000000&dtBegin=${dtBegin}&dtEnd=${dtEnd}&WarnState=1,2,3,4&DisposeState=0,1&`
					// link = `http://192.168.255.2:1705/api/EarlyWarning/Api/GetVillageWarnStaticInfo?addvcd=350400000000&dtBegin=${dtBegin}&dtEnd=${dtEnd}&WarnState=1,2,3,4&DisposeState=0,1&`
					link = btoa(link)
				} else if (this.curTab == 1) {
					let dtcode = moment().format('YYYYMMDD')
					link = `http://192.168.255.2:1705/api/WeatherWarning2H/Api/GetVillageWarnStat?addvcd=350400000000&sspcd=${dtcode}08.002&`
					link = btoa(link)
				} else {
					let dtcode = moment().format('YYYYMMDD')
					link = `http://192.168.255.2:1705/api/WeatherWarning24H/Api/GetVillageWarnStat?addvcd=350400000000&sspcd=${dtcode}20.024&`
					link = btoa(link)
				}

				this.getData(link)
			}
		},
		computed: {},
		mounted() {
			this.fnComputeTime()
		}
	}
</script>
<style lang="less" scoped>
	.self-box {
		height: calc(100% - 20rpx);
		width: 100%;
		.tabs {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 60rpx;
			line-height: 60rpx;
			.tab-item {
				flex: 1;
				font-weight: 600;
				color: #5b5b5b;
				text-align: center;
				height: 100%;
			}
			.tab-item-active {
				color: #0085ff;
				background: #e8f5ff;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
			}
		}
		.tb {
			.tb-top {
				display: flex;
				align-items: center;
				height: 80rpx;
				background: #e8f5ff;

				.tb-top-item {
					flex: 1;
					text-align: center;
					color: #5b5b5b;
				}
			}
			.col-list-color1 {
				background: #ffe8e8;
				.col-list {
					color: #ff0000;
				}
			}
			.col-list-color2 {
				.col-list {
					color: #ff7a00;
				}
				background: #fff2df;
			}
			.col-list-color3 {
				.col-list {
					color: #b4962d;
				}
				background: #fffbdf;
			}
			.col-list-color4 {
				.col-list {
					color: #4f86b8;
				}
				background: #f5faff;
			}
			.col-list {
				width: 100%;
				display: flex;
				align-items: center;
				font-weight: 600;
				> view {
					flex: 1;
					text-align: center;
				}
			}
		}
		.empty-box {
			margin-top: 60rpx;
		}
	}
</style>
